<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">
		<title>优选服务</title>
		<link rel="stylesheet" href="../../css/mui.min.css">
		<link rel="stylesheet" href="../../css/app.css">
		<style>
			body{background:#f2f6f9;overflow: auto;}
			.bar1{z-index: 100;background: #1a8bff;border: none !important;box-shadow: none;}
			.mui-icon-closeempty{color: #fff;font-size: 0.7rem !important;padding-top: 0.10rem !important;}
			.bar1 .mui-pull-right{padding-top: 0.67rem;display: block;width:0.38rem;height: 0.38rem;background: url(../../images/work/share.png) no-repeat center center;background-size: contain;margin-right: 0.26rem !important;}
			.bar1 .right1{display: block;width:0.38rem;height: 0.38rem;background:url(../../images/work/star1.png)no-repeat center center;background-size: contain;margin-right: 0.3rem !important;}
			
			.mui-bar-nav{position: relative;width:100%;background:#fff;color: #000;height: 3.36rem;background: url(../../images/work/banner1.png) no-repeat center center;background-size: 100%;margin-bottom: 0.86rem;}
			.mui-bar-nav .mui-icon-left-nav{color:#000}
			.mui-bar-nav>.back{color:#000;margin-top: .04rem;}
			
			.mui-bar-nav .info{width: 7.02rem;height:1.22rem;background: #fff;margin: 0 auto;margin-top: 2.94rem;border-radius: 0.1rem;padding-left: 0.25rem;padding-top: 0.21rem;}
			.mui-bar-nav .info .img_box{float: left;width: 0.8rem;height: 0.8rem;border-radius: 0.15rem;background: #f3f3f3;padding:0.16rem 0 0 0.2rem;}
			.mui-bar-nav .info .img_box img{width: 0.52rem;}
			.mui-bar-nav .info .text_box{line-height: 0.4rem;width: 5.71rem;min-height: 0.65rem;float: right;text-align: left;font-size: 0.3rem;color: #333333;}
			.mui-bar-nav .info .text_box div:last-child{font-size: 0.28rem;color: #a7a7a7;}
			
			.mui-content,ul{padding: 0 !important;margin: 0 !important;overflow: hidden;}
			.mui-content{background:#f2f6f9 ;}
			.mui-content .ul_box{margin-top: 0.34rem;}
			.mui-content div .title{font-size: 0.28rem;color: #7d7d7d;padding-left: 0.44rem;}
			.mui-content div ul{width: 7.02rem;margin: 0 auto !important;position: relative;}
			.mui-content div ul li{width: 100%;min-height: 1.42rem;position: relative;padding-left: 0.25rem;background: #fff;border-radius: 0.1rem;margin-top: 0.21rem;z-index: 10;}
			.mui-content div ul li:nth-child(n-1){margin-bottom: 0.16rem !important;}
			.mui-content div ul li .flow{color: #aba29e;width: 0.9rem;height: 0.88rem;font-size: 0.28rem;text-align: center;padding-top: 0.54rem;background: url(../../images/work/flow.png) no-repeat top center;background-size: 0.6rem;position: absolute;top:0.3rem;font-style: italic;}
			.mui-content div ul li .text{width:100%;padding:0.4rem 0.32rem 0.29rem 1.4rem;font-size: 0.28rem;color: #55565c;line-height: 0.34rem;}
			.mui-content div ul .line{width: 0.04rem;height: 100%;background: #d3d9e0;position: absolute;top:0;left: 0.63rem;}
			.mui-content div ul li .text .text_title{margin-bottom: 0.1rem; line-height: .34rem; font-size: .3rem;}
			.mui-content div ul li .text .text_title span{display: inline-block;min-width: 0.7rem;height: 0.34rem;color: #fff;background: #75cb12;text-align: center;border-radius: 0.06rem;padding: 0rem 0.1rem;margin-right: 0.14rem;}
		</style>
	</head>
	<body >
		 
		<div class="mui-bar mui-bar-nav">
			<div class="info">
				<div class="img_box">
 					<img src="" alt="" />
				</div>
				<div class="text_box" id='serviceGuid'>
					<template>
						<div>{{serviceGuide.guideName}}</div>
						<div class="text0">{{serviceGuide.guideRemark}}</div>
					</template>
				</div>
			</div>
		</div>
		<div id="ul_box" class="mui-content" >
			<template >
				<div  class='ul_box' v-for=" (guideStage ,index ) in guideStageList">
	 				<div class="title">{{ guideStage.stageName}}</div>
					<ul id='folw-text' >
						<template v-for='(guideItem ,index) in guideStage.guideItemList'>
							<li>
		 						<div class="flow"  v-if="index < 9">
			 						{{  "0"+(index + 1) }}
		  						</div>
		  						<div class="flow"  v-else >
			 						{{ index + 1}}
		  						</div>
								<div class="text">
									<div class="text_title" v-if=" guideItem.serviceOid !== null">
			 							<span :id='guideItem.serviceOid' v-if="guideItem.handleForm !== '0'" >办理</span> 
	 		  							<span :id='guideItem.serviceOid' v-if="guideItem.handleForm === '0'">指南</span>
			  							 {{ guideItem.itemName}}
 		  						    </div>
 		  						    <div class="text_title" v-else >
	  	 	  							 {{ guideItem.itemName}}
		  						    </div>
		 							 {{ guideItem.itemRemark }}
								</div>
							</li>
						</template>
	 					<div class="line"></div> 
					</ul>			
				</div>
			</template>
		</div> 

	</body>
	<script src="../../js/mui.min.js"></script>
	<script src="../../js/common.js"></script>
	<script src="../../js/jquery2.2.4.min.js"></script>
	<script src="../../js/vue.min.js"></script>
	<script src="../../js/app.js"></script>
	<script src="../../js/mui.pullToRefresh.js"></script>
	<script src="../../js/mui.pullToRefresh.material.js"></script>
	<script>
		 
		var guide_vm = new Vue( { 
			el: '#serviceGuid', 
		  data: {
	 	  	serviceGuide:{}
 		  }
		});  
	 
     mui.plusReady(function(){
     	utils.showWaiting();
     	var param = 'guideOid=' +utils.getUrlParam('guideOid'); 
      	var url = 'appHttpService/getServiceGuide.do';
      	
     	utils.ajax(url,function(data){
      		var data = JSON.parse(data); 
      		if(data.state =='1'){
     			mui.toast("系统内容出错");
     			return
     		}else{
     			var serviceGuide = data.serviceGuide;
     			//替换对应的图片
     			$(".mui-bar-nav").css("backgroundImage"," url(../../images/work/banner" + serviceGuide.sort+".png)");
     			$("img").attr("src","../../images/work/lcsp" + serviceGuide.sort+".png");
     			
     			if(serviceGuide != null){
     				guide_vm.serviceGuide = serviceGuide;
     			}
     			
     			var guideStageList = data.guideStageList;   
     			 
	       		if (guideStageList != null && guideStageList.length>0) {
     				var guideStage_vm = new Vue( { 
						el: "#ul_box",  
					  	data: {
				  			guideStageList:guideStageList
						}
					});
					mui('.text_title').on('tap','span',function(){
			    		var serviceOid = this.id;
			    		if(serviceOid){
			    			utils.showWaiting();
			            	var hsw = openNewWin('_www/src/work/bszn_info.html?serviceOid=' + serviceOid,{bounce:'none'}, 'bszn_info');
			            	mui.fire(hsw,'getDetail',{serviceOid:this.getAttribute("id")});
			    		}
			    	})
 	       		}
	       		//描述说明自适应
	       		if(serviceGuide.guideRemark.length>18){
	 				serviceGuide.guideRemark = serviceGuide.guideRemark.slice(0,19) + '...';
	  			}
      		}
     		utils.closeWaiting();
      	},param);
      
       });
    	
	</script>
</html>